<template>
  <div class="personal">
    <div class="containter">
      <router-view></router-view>
    </div>
    <nav-tab :data="nav" class="tab" @turn="_turn" :activeIndex="active" :bg="bg"></nav-tab>
  </div>
</template>

<script type="text/ecmascript-6">
import NavTab from 'components/nav-tab'
import personalBg from '../assets/image/tab/personal.png'
export default {
  components: {
    NavTab
  },
  data () {
    return {
      nav: [
        {name: '活动报名', url: '/personal/home'},
        {name: '精彩回顾', url: '/personal/review'},
        {name: '营地掠影', url: '/personal/camp'},
        {name: '个人', url: '/personal/my'}
      ],
      bg: personalBg,
      active: 1
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    _turn(index) {
      this.active = index
      let url = this.nav[index].url
      this.$router.push(url)
    },
    fetchData() {
      let path = this.$route.path
      let index = this.nav.findIndex(el => el.url === path)
      if (index === -1 && path === '/personal/activity') {
        index = 0
      }
      this.active = index
    }
  },
  watch: {
    '$route': 'fetchData'
  }
}
</script>

<style scoped lang="less">
  .personal{
    width: 100%;
    height: 100%;
    .containter{
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      padding-bottom: 100px;
    }
    .tab{
      position: fixed;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 100px;
      box-sizing: border-box;
      border-top: 2px solid #e6e6e6;
    }
  }
</style>
